<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/js/vue.js"></script>
    <script src="../static/js/vue-router.js"></script>
</head>
<body>

<div id="app">

<h1>{{msg}}</h1>

    <a href="#/login">用户登录</a>
    <a href="#/register">用户注册</a><hr>

    <router-link to="/login">用户登录</router-link>
    <router-link to="/register">用户注册</router-link><hr>

    <router-link v-bind:to="{path:'/login'}">用户登录</router-link>
    <router-link v-bind:to="{path:'/register'}">用户注册</router-link><hr>

    <router-link v-bind:to="{name:'Login'}">用户注册</router-link>
    <router-link v-bind:to="{name:'Register'}">用户注册</router-link><hr>

    <button @click="userLogin">用户登录</button>
    <button @click="userRegister">用户注册</button><hr>


    <router-view></router-view>

</div>

</body>
</html>

<script>


    const login = {
        template: `<div><h3>用户登录组件</h3><hr></div>`
    };

    const register = {
        template: `<div><h3>用户注册组件</h3><hr></div>`
    };

    const error = {
        template: `<div><h3>访问页面不存在</h3><hr></div>`
    };

    const router = new VueRouter({
        routes: [
            {path: '/', redirect: '/login'},
            {path: '/login', component: login, name:'Login'},
            {path: '/register', component: register, name: 'Register'},
            {path: '*', component: error}
        ]
    });

    new Vue({
        el: "#app",
        data:{
            msg: "vue-router",
        },
        computed:{},
        methods:{
            userLogin(){
                this.$router.push("/login");
            },

            userRegister(){
                console.log(this);
            }
        },
        router
    })
</script>